<template>
  <div style="background: #f5f5f5;">
    <pageTop :text="text"></pageTop>
    <div @click="blank">
      <slideBar></slideBar>
      <div>
        <div class="contactImg">
          <img src="../assets/contact.png" alt="">
          <p class="line"></p>
          <p class="text">CONTACT US</p>
        </div>
        <div class="clear"></div>
        <div class="contactWay" align="center">
          <p>联系方式</p>
          <span>QQ：{{way.contactqq}}</span>
          <span>微信：{{way.vxnumber}}</span>
          <span>微博：{{way.weibo}}</span>
          <span>联系电话：{{way.tel}}</span>
          <span style="width: 100%;">QQ邮箱：{{way.qqemail}}</span>
          <span style="width: 100%;">网易邮箱：{{way.wyemail}}</span>

        </div>
        <div class="map">
          <contactmap></contactmap>
        </div>
      </div>

      <gotop></gotop>
    </div>
    <pageBottom></pageBottom>
  </div>
</template>

<script>
  import pageTop from '../components/pageTop'
  import slideBar from '../components/slideBar'
  import gotop from '../components/public/goTop'
  import pageBottom from '../components/pageBottom'
  import contactmap from '../components/public/contactmap'
  export default {
    name: "contactUs",
    components:{
      pageTop,
      slideBar,
      gotop,
      pageBottom,
      contactmap
    },
    data(){
      return{
        text:'联系我们',
        way:[],
      }
    },
    created(){
      var that=this;
      this.$http({
        url:'/offcial/index.php/index/Acticle/GetContact',
        method:'post',
        data:{
          time:this._globe.time1,
          device_id:this._globe.device_id,
          version:this._globe.version,
          platform:this._globe.platform,
          token:this._globe.token1,
        }
      })
        .then(function (response) {
          console.log(response);
          const resData=response.data;
          if(resData.code==1){
            that.way = resData.data;
            /*console.log(that.);*/
          }
        })
        .catch(function (response) {
          console.log(response);
        })

    },
    methods:{
      blank(){
        $("#containers").css(
          {"transform":"translateX(0vw)","transition":"transform .5s"});
      },
      menu(){
        $("#containers").css(
          {"transform":"translateX(72vw)","transition":"transform .5s"});
      }
    },
  }
</script>

<style scoped lang="scss">
.contactImg{
  width: 100vw;
  height: 48vw;
    img{
      width: 100%;
      height: 100%;
    }
  .text{
    width: 44%;
    height: 17.33vw;
    font-size: 34px;
    color: #fff;
    position: absolute;
    left: 11.5vw;
    top: 22.5vw;
    text-align: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 1vw;
    float:left;
  }
  .line{
    float: left;
    width: 1vw;
    height: 19.33vw;
    border-right: 4px solid #fff;
    position: absolute;
    top: 25vw;
    border-radius: 1px;
    left: 9vw;
  }
}
.contactWay{
  width: 100vw;
  height: 54.67vw;
  background: #fff;
  margin-top: 4vw;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 5.33vw;
  margin-bottom: 4vw;
    p{
      font-size: 20px;
      color: #333;
      margin-bottom: 4vw;
    }
  span{
    width: 50vw;
    height: 9vw;
    display: inline-block;
    text-align: left;
    float: left;
    font-size: 13px;
    text-indent: 3vw;
    color: #333;
  }
}
.map{
  width: 100vw;
  height: 65vw;
  margin-top: 4vw;
}
</style>
